{% extends 'home/base.html' %}
{% block header %}
    <link
            href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
            rel="stylesheet"
    />
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 200px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <h1>会员中心</h1>
        <hr>
        <div class="d-flex  justify-content-between">
            <div class="d-flex flex-fill p-2 align-items-center shadow-sm">
                <img style="width: 120px;height: 120px" class="img-thumbnail rounded-circle mr-5"
                     src="{{ user_login_info.mem_avatar }}" alt="">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        账号: {{ user_login_info.mem_tel }}
                    </li>
                    <li class="list-group-item">
                        昵称: {{ user_login_info.mem_nickname }}
                    </li>
                </ul>
            </div>
            <div class="shadow-sm p-4 ml-3">
                <button onclick="location.href='{{ url_for('home.user',id=user_login_info.mem_id) }}'"
                        class="btn btn-outline-primary btn-block">个人主页
                </button>
                <button onclick="location.href='{{ url_for('home.reset_pwd') }}'"
                        class="btn btn-outline-primary btn-block">修改密码
                </button>
                <button onclick="location.href='/logout'" class="btn btn-outline-danger btn-block">安全退出</button>
            </div>
        </div>
        <div class="shadow-sm alert mt-2">
            <h3>发布内容</h3>
            <form action="{{ url_for('home.ucenter') }}" method="post">
                <div class="form-group">
                    <input name="que_title" type="text" placeholder="请输入标题" class="form-control">
                     <small class="form-text text-danger">{{ errors.title }}</small>
                </div>
                <div class="form-group">
                    <label for="#">请选择话题分类</label>
                    <select  class="form-control" name="que_cat_id">
                        <option value="">请选择分类</option>
                        {% for item in cates %}
                            <option value="{{ item.cat_id }}">{{ item.cat_name }}</option>
                        {% endfor %}
                    </select>
                    <small class="form-text text-danger">{{ errors.cate }}</small>
                </div>
                <div class="form-group">
                    <label for="#">请选择标签</label>
                    <div class="mb-2">
                        {% for item in tags %}
                            <label>
                                <input name="que_tags" type="checkbox" value="{{ item.tag }}">&nbsp;{{ item.tag }}
                            </label>
                            &nbsp;
                        {% endfor %}
                    </div>
                    <small class="form-text text-danger">{{ errors.tags }}</small>
                </div>
                <div class=" form-group">
                    <label for="#">请输入话题内容</label>
                    {# <textarea required class="form-control" cols="30" rows="3" style="resize: none" #}
                    {# placeholder="请输入话题内容"></textarea> #}
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                    <small class="form-text text-danger">{{ errors.content }}</small>
                    {#     隐藏域保存话题内容  #}
                    <input type="hidden" id="que_content" name="que_content">
                </div>
                <div class="form-group">
                    <button class="btn btn-outline-primary btn-block rounded-pill">立即发布</button>
                </div>
            </form>
        </div>
        <div class="shadow-sm alert">
            <h3 class="btn btn-outline-primary">我的关注</h3>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    1-flask中url_for()如何传递查询参数?
                </li>
                <li class="list-group-item">
                    2-flask中url_for()如何传递路径参数?
                </li>
                <li class="list-group-item">
                    3-flask中如何给所有模板传入公共数据?
                    @app.context_processor
                </li>
                <li class="list-group-item">
                    4-flask中如何添加请求拦截器?
                    @app.before_request
                </li>
            </ul>
        </div>
        <div class="shadow-sm alert">
            <h3 class="btn btn-outline-primary">我的粉丝</h3>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    1-flask中url_for()如何传递查询参数?
                </li>
                <li class="list-group-item">
                    2-flask中url_for()如何传递路径参数?
                </li>
                <li class="list-group-item">
                    3-flask中如何给所有模板传入公共数据?
                    @app.context_processor
                </li>
                <li class="list-group-item">
                    4-flask中如何添加请求拦截器?
                    @app.before_request
                </li>
            </ul>
        </div>
        <div class="shadow-sm alert">
            <h3 class="btn btn-outline-primary">我的收藏</h3>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    1-flask中url_for()如何传递查询参数?
                </li>
                <li class="list-group-item">
                    2-flask中url_for()如何传递路径参数?
                </li>
                <li class="list-group-item">
                    3-flask中如何给所有模板传入公共数据?
                    @app.context_processor
                </li>
                <li class="list-group-item">
                    4-flask中如何添加请求拦截器?
                    @app.before_request
                </li>
            </ul>
        </div>

        <div class="shadow-sm alert">
            <h3 class="btn btn-outline-primary">我的足迹</h3>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    1-flask中url_for()如何传递查询参数?
                </li>
                <li class="list-group-item">
                    2-flask中url_for()如何传递路径参数?
                </li>
                <li class="list-group-item">
                    3-flask中如何给所有模板传入公共数据?
                    @app.context_processor
                </li>
                <li class="list-group-item">
                    4-flask中如何添加请求拦截器?
                    @app.before_request
                </li>
            </ul>
        </div>

    </div>
    <script>
        const {createEditor, createToolbar} = window.wangEditor

        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                const html = editor.getHtml()
                console.log('editor content', html)
                {# 将富文本编辑器的内容保存到隐藏域中 #}
                que_content.value = html
                // 也可以同步到 <textarea>
            },
        }

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
        })

        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'simple', // default or simple
        })
    </script>
{% endblock %}